<ui:composition template="../templates/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"  xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

	<!-- Page title -->
	<ui:define name="title">${msg.user_subscription_title}</ui:define>
	
	<!-- Page content -->
	<ui:define name="content">
		
		<!-- Breadcrumb -->
		<h:form id="subscriptionBreadcrumbForm">
			<p:breadCrumb styleClass="breadcrumb">
				<p:menuitem title="${msg.user_subscription_breadcrumb_home}" url="#{navigationBean.accessHomePage}" />
				<p:menuitem disabled="true" styleClass="userCategoryColor" value="#{msg.user_subscription_breadcrumb_subscription}"/>
			</p:breadCrumb>
		</h:form>
		
		<h:form id="subscriptionForm" prependId="false">
		
			<!-- Subscription fieldset -->
			<p:fieldset id="subscriptionFieldset" styleClass="fieldset userFieldset userCategoryBorderColor">
				
				<f:facet name="legend">
					<span class="userCategoryColor">${msg.user_subscription_subscription_form}</span>
				</f:facet>
				
				<!-- Messages -->
				<p:messages autoUpdate="true"/>
				
				<!-- Form -->
				<p:outputPanel id="subscriptionFormPanel" layout="block" styleClass="formTable"> 
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionEMail">${msg.user_subscription_form_email}</label>
						</span>
						<span class="formCell">
							<p:inputText id="subscriptionEMail" label="${msg.user_subscription_form_email}" maxlength="100" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_email}" value="#{subscriptionBean.candidate.email}"/>
						</span>
					</div>
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionPassword">${msg.user_subscription_form_password}</label>
						</span>
						<span class="formCell">
							<p:password feedback="true" goodLabel="${msg.general_form_password_good_label}" id="subscriptionPassword" match="subscriptionPasswordConfirmation" 
							promptLabel="${msg.general_form_password_prompt_label}" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_password}" 
							strongLabel="${msg.general_form_password_strong_label}" validatorMessage="${msg.general_form_passwords_do_not_match}" value="#{subscriptionBean.password}" 
							weakLabel="${msg.general_form_password_weak_label}" />
						</span>
					</div>
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionPasswordConfirmation">${msg.user_subscription_form_password_confirmation}</label>
						</span>
						<span class="formCell">
							<p:password id="subscriptionPasswordConfirmation" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_password_confirmation}" />
						</span>
					</div>
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionName">${msg.user_subscription_form_name}</label>
						</span>
						<span class="formCell">
							<p:inputText id="subscriptionName" label="${msg.user_subscription_form_name}" maxlength="50" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_name}" value="#{subscriptionBean.candidate.name}"/>
						</span>
					</div>
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionFirstName">${msg.user_subscription_form_first_name}</label>
						</span>
						<span class="formCell">
							<p:inputText id="subscriptionFirstName" label="${msg.user_subscription_form_first_name}" maxlength="50" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_first_name}" value="#{subscriptionBean.candidate.firstName}" />
						</span>
					</div>
					<div class="formRow">
						<span class="formCell formLabelCell">
							<label class="required" for="subscriptionValidation">${msg.user_subscription_form_validation}</label>
						</span>
						<span class="formCell">
							<p:inputMask id="subscriptionValidation" label="${msg.user_subscription_form_validation}" mask="99" maxlength="2" required="true" 
							requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_subscription_form_validation}" value="#{subscriptionBean.validationValue}" />
						</span>
						<span class="formCell">
							<p:commandButton icon="ui-icon-help" id="validationAboutButton" readOnly="true" styleClass="formIconOnlyButton" title="${msg.general_about}" type="button"/>
						</span>
					</div>
					<div class="formTableFooter">
						${msg.user_subscription_form_validation_what_is_the_sum_of_the_current_date_digits}
					</div>
				</p:outputPanel>
				
				<!-- Buttons line -->
				<p:outputPanel layout="block" styleClass="formButtonsLine userFormButtonsLine">
					<p:commandButton action="#{subscriptionBean.validateAndSubscribe}" icon="userCategoryIconSprite ui-icon-circle-plus" id="subscriptionButton" 
					styleClass="userCategoryBackground" update="subscriptionFormPanel" value="${msg.user_subscription_form_button_subscribe}" />
				</p:outputPanel>
			
			</p:fieldset>
			
			<!-- About overlay panel -->
			<p:overlayPanel for="validationAboutButton" hideEvent="mouseout" showEvent="mouseover">
				<ui:include src="../docs/#{userBean.currentLocale.language}/actionValidationAbout.xhtml" />
			</p:overlayPanel>
			
			<!-- Block UI -->
			<ui:include src="../components/blockUI.xhtml">
				<ui:param name="block" value="subscriptionFieldset" />
				<ui:param name="trigger" value="subscriptionButton" />
				<ui:param name="widgetVar" value="subscriptionFormBlockUI" />
			</ui:include>
			
		</h:form>
	</ui:define>
	
</ui:composition>